<template>
  <div id="waterDrop"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as PIXI from 'pixi.js'
import { ShockwaveFilter } from 'pixi-filters'

onMounted(() => {
  initPixi()
})
// 初始化
const initPixi = () => {
  const optoions = {
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    antialias: true
  }
  const app = new PIXI.Application(optoions)
  document.querySelector('#waterDrop').appendChild(app.view)
  // 创建纹理
  const texture = PIXI.Texture.from('/textures/002.jpg')
  // 创建精灵
  const sprite = new PIXI.Sprite(texture)
  sprite.width = app.screen.width
  sprite.height = app.screen.height
  // 创建容器
  const container = new PIXI.Container()
  // 将精灵添加到容器中
  container.addChild(sprite)
  // 将容器添加到画布
  app.stage.addChild(container)
  // 添加文字
  const text = new PIXI.Text('Hello PixiJs', {
    fontFamily: 'Arial',
    fontSize: 30 + Math.floor(app.screen.width * 0.1),
    fill: 0xffffff,
    align: 'center',
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 40, // 阴影模糊度
    dropShadowAngle: Math.PI / 2, // 阴影照射角度
    dropShadowDistance: 2 // 阴影厚度
  })
  text.x = app.screen.width / 2
  text.y = app.screen.height / 2
  text.anchor.set(0.5)
  container.addChild(text)

  // 添加置换滤镜
  const displacementSprite = PIXI.Sprite.from('/textures/water.png')
  displacementSprite.scale.set(3)
  // 纹理重复模式
  displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT

  // 将纹理放到滤镜上
  const displacementFilter = new PIXI.DisplacementFilter(displacementSprite)
  // 精灵天机到容器
  container.addChild(displacementSprite)

  // 添加水波纹
  const shockwaveFilter1 = new ShockwaveFilter(
    [Math.random() * app.screen.width, Math.random() * app.screen.height],
    {
      radius: 100, // 半径
      wavelength: 80, // 波长
      amplitude: 108, // 振幅
      speed: 150 // 速度
    },
    0
  )
  const shockwaveFilter2 = new ShockwaveFilter(
    [Math.random() * app.screen.width, Math.random() * app.screen.height],
    {
      radius: 40, // 半径
      wavelength: 30, // 波长
      amplitude: 10, // 振幅
      speed: 200 // 速度
    },
    0
  )
  const shockwaveFilter3 = new ShockwaveFilter(
    [Math.random() * app.screen.width, Math.random() * app.screen.height],
    {
      radius: 160, // 半径
      wavelength: 65, // 波长
      amplitude: 105, // 振幅
      speed: 300 // 速度
    },
    0
  )

  // 将滤镜添加到容器
  container.filters = [
    displacementFilter,
    shockwaveFilter1,
    shockwaveFilter2,
    shockwaveFilter3
  ]
  // 添加动画
  app.ticker.add((delta) => {
    displacementSprite.x += 0.5
    displacementSprite.y += 0.5
    createRandomWave(shockwaveFilter1, 1.2)
    createRandomWave(shockwaveFilter2, 1)
    createRandomWave(shockwaveFilter3, 0.7)
  })

  function createRandomWave(waveFilter, restTime) {
    waveFilter.time += 0.01
    if (waveFilter.titme > restTime) {
      waveFilter.time = 0
      waveFilter.center = [
        Math.random() * app.screen.width,
        Math.random() * app.screen.height
      ]
    }
  }

  // 监听点击事件，根据位置及创建波纹
  app.view.addEventListener('click', (e) => {
    shockwaveFilter1.center = [e.clientX, e.clientY]
    shockwaveFilter1.time = 0
  })
}
</script>

<style scoped></style>
